<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app" style="width:800px;height:600px;"></div>
  <script src="../../../../node_modules/echarts/dist/echarts.js"></script>
  <!-- <script src="../../../../node_modules/echarts/theme/macarons.js"></script> -->
  <script>
    // 3.基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('app'));

    // 4.指定图表的配置项和数据
    // var option = {
    //   // 图标的标题
    //     title: {
    //         text: 'ECharts 入门示例'
    //     },
    //     // 控制数据显示
    //     tooltip: {},
    //     // 控制内容显示开关
    //     legend: {
    //         data:['销量','库存']
    //     },
    //     // x轴配置
    //     xAxis: {
    //         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    //     },
    //     // y轴配置
    //     yAxis: {},
    //     // 
    //     series: [{
    //         name: '销量',
    //         type: 'bar',
    //         data: [5, 20, 36, 10, 10, 20]
    //     },
    //     {
    //         name: '库存',
    //         type: 'bar',
    //         data: [15, 30, 136, 106, 5, 1]
    //     }]
    // };

    var option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
    // 5.使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>
